@import url("video-folder-edit-settings.css");

.savedVideosThumbnailContainer{
    padding: 0.5rem 0.25rem 0 0.25rem; 
    display: grid;
    margin: auto;
    grid-template-columns: repeat(6 , auto); 
}

@media only screen and (max-width: 2229px){
  .savedVideosThumbnailContainer{ 
    grid-template-columns: repeat(5, auto); 
  }
}

@media only screen and (max-width: 1859px){
  .savedVideosThumbnailContainer{ 
    grid-template-columns: repeat(4, auto); 
  }
}

@media only screen and (max-width: 1489px){
  .savedVideosThumbnailContainer{ 
    grid-template-columns: repeat(3, auto); 
  }
}

@media only screen and (max-width: 1129px){
  .savedVideosThumbnailContainer{ 
    grid-template-columns: repeat(2, auto); 
  }
}

@media only screen and (max-width: 749px){
  .savedVideosThumbnailContainer{ 
    grid-template-columns: repeat(1, auto); 
  }
}

.videoThumbnailContainer, .thumbnailTitleContainer, .folderTitleContainer{
  color: rgb(0,0,0);
  text-decoration: none;
}

.folderContainer:hover{
  cursor: pointer;
} 

.videoThumbnailContainer:hover{
  text-decoration: underline;
}

.videoThumbnailContainer, .folderContainer { 
  width: 362.5px; 
  float: left;
  position: relative;
  padding: 0.5rem 0.25rem 0.15rem 0.25rem; 
  border-radius: 4px;
  overflow: hidden;
}

.folderContainer {
  text-decoration: none;
}

.thumbnail-image-container{ 
  background: rgb(0,0,0);
  height: 204px;
  margin-bottom: 0.271rem;
}

.folder-image-container{ 
  background: none;
  font-size: 19em;
  display: inline-flex;
  align-items: center; 
  padding: 0 .2939em;
  height: 204px;
  margin-bottom: 0.271rem;
  color: #121317;
}

.thumbnail-image{ 
  width: 100%; 
  height: 100%;
  object-fit: contain;
  background: rgb(0,0,0);
}

.thumbnail-option-menu, .thumbnail-video-duration {
  cursor: pointer;
  position: absolute;  
  font-size: 16px ;
  background: none;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  color: #ffffff;
}

.thumbnail-option-menu{
  top: 5px;
  right: 5px; 
  height: 3em ;
  width: 3em ;
  background-image: radial-gradient( circle closest-side, rgba(0,0,0,0.1), rgba(0,0,0,0) ) !important;
}

.thumbnail-video-duration {
  display: flex;
  flex-direction: row;
  align-items: center;
  display: inline-flex;
  border-radius: 2px;
  bottom: 30px;
  right: 7px;
  height: 12px;
  margin: 4px;
  padding: 3px 4px;
  background: rgba(0,0,0,0.8) !important;
}

.thumbnail-option-menu:hover {
  color: #08e108;
}

.thumbnail-options-container{
  width: 362.5px;
  height: 204px;
  top: .15rem;
  right: 0;
  position: absolute;
  padding: 0.1rem 0 0 0rem;
  background: rgba(0,0,0,0.5);
  display: grid;
  grid-gap: 1ch;
  grid-template-rows: repeat(2,2.1875rem);
  cursor: default;
}

.dragging {
  opacity: .5;  
}  

.dragging-target {
  outline: 1px dashed #000;
} 

.dragging-target-left {
  border-left: 0.15rem #61acca solid;   
  margin-left: -0.15rem; 
}  
.dragging-target-middle { 
  outline: 0.15rem #61acca solid;   
} 
 
.dragging-target-right {  
  border-right: 0.15rem #61acca solid;  
  margin-right: -0.15rem; 
} 

.dragging-target-top { 
  border-top: 0.15rem #61acca solid;    
  margin-top: -0.15rem; 
} 

.dragging-target-bottom { 
  border-bottom: 0.15rem #61acca solid;  
  margin-bottom: -0.15rem; 
}  

.option-menu-one, .option-menu-two, .option-menu-three,
.option-menu-one-folder, .option-menu-two-folder,
.option-play, .option-delete{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.44444;
  padding: 0 1em;
  height: 2.1875rem;
  min-width: 3.75rem;
  border: 1px solid #000;
  transition: border-radius .15s linear;
  text-decoration: none;
  background: #fff;
}

.option-menu-one, .option-menu-two, .option-menu-three{ 
  margin: 2.95rem 1em auto 1em; 
}

.option-menu-one-folder, .option-menu-two-folder,
.option-play, .option-delete { 
  margin: 3.8rem 1em auto 1em; ;
}

.option-menu-one:hover, .option-menu-two:hover, .option-menu-three:hover,
.option-menu-one-folder:hover, .option-menu-two-folder:hover,
.option-play:hover, .option-delete:hover{
  border-radius: 2em;
}

.option-menu-one, .option-menu-one-folder, .option-play{
  grid-row: 1;
}

.option-menu-two, .option-menu-two-folder, .option-delete{
    grid-row: 2;
}

.option-menu-three{
  grid-row: 3;
}

.inputNewTitle{
  width: 100%  !important;
  display: block !important;
  border: 0px !important; 
  background: none !important; 
} 

/* Mobile  friendly */
@media only screen and (max-width: 379px){ 
  .videoThumbnailContainer, .folderContainer { 
    width: 290px !important; 
  }
  .folder-image-container { 
    font-size: 165px;
    padding: 0 .3773em;
  }

  .thumbnail-image-container, .folder-image-container{  
    height: 165px !important;  
  }
  .thumbnail-image{ 
    height: 165px !important;  
  }

  .thumbnail-options-container{
    width: 290px !important;
    height: 165px !important;
  }

  .option-menu-one, .option-menu-two, .option-menu-three{
    margin: 1.78rem 1em auto 1em !important;
  }

  .option-menu-one-folder, .option-menu-two-folder,
  .option-play, .option-delete{
    margin: 3rem 1em auto 1em !important;
  }
}